<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<style>
				div{
					margin: 20px;
					width: 300px;
				}
				
				#msg{
					background-color: #C7254E;
					color: white;
					padding: 20px;
					border: 10px solid black;
					border-radius: 20px;
					font-size: 30px;
					display: none; //默认隐藏
				}
		</style>
		<script>
			//展示登录成功信息
			function doLogin(){
				var msg = document.getElementById("msg");
				var username = document.getElementById("username");
								var password = document.getElementById("password");
								
								alert( "用户名："+username.value+"，密码："+password.value );
				msg.innerHTML = "<font color='red'>登录成功</font><div>欢迎："+username.value+"</div>";
				msg.style = "display: block;"  //展示隐藏的div
			}
			
			//获取页面所有的input框，是text和password框，内容=空串
			function doClear(){
				var inputs = document.getElementsByTagName("input");
				for(var i=0; i<inputs.length; i++){
					if(inputs[i].type=='text' || inputs[i].type=='password'){
						inputs[i].value = '';
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="container">
			<div id="msg"></div>

			<section>
				<fieldset>
					<legend>登录</legend>
						<div>
							<label for="username">用户名：</label>
							<input type="text" class="form-control"
							 autocomplete="off" 
							 autofocus="autofocus"
							 placeholder="请输入用户名..."
							 id="username" name="username"/>
						</div>
						
						<div>
							<label for="password">密码：</label>
							<input type="password" class="form-control"
							 autocomplete="off"
							 placeholder="请输入密码..."
							 id="password" name="password"/>
						</div>
						
						<div>
							<input type="submit" class="btn btn-primary" id="btnLogin" value="登录" onclick="doLogin()"/>
							<input type="button" class="btn btn-danger" id="btnClear" value="清除" onclick="doClear()"/>
						</div>
					</div>
				</fieldset>
			</section>
		</div>
	</body>
	<script>
		//后期绑定，给按钮增加onclick事件
		var btnLogin = document.getElementById('btnLogin');
		btnLogin.addEventListener('click', function(){
			doLogin();
		});
		
		var btnClear = document.getElementById('btnClear');
		btnClear.addEventListener('click', function(){
			doClear();
		})
	</script>
</html>
